<template>
  <a-layout>
    <a-layout-content style="height: calc(100vh - 88px); padding: 2px">
      <VxeBasicTable ref="tableRef" v-bind="gridOptions" v-on="gridEvents(null)">
        <template #title_default="{ row }">
          <component v-if="row.icon" :is="row.icon" />
          <span style="padding-left: 8px">{{ t(row.title) }}</span>
        </template>
        <template #hide_default="{ row }">
          <a-tag :color="!row.hide ? 'cyan' : 'red'"> {{ !row.hide ? '是' : '否' }}</a-tag>
        </template>
        <template #type_default="{ row }">
          <a-tag v-if="row.type == 1" color='orange'>目录</a-tag>
          <a-tag v-else-if="row.type == 2" color='blue'>菜单</a-tag>
          <a-tag v-else color="green">按钮</a-tag>
        </template>
        <template #toolbar_buttons>
          <ToolButtons :filter-call="handleOpenFilter" :create-call="handleEdit" :delete-call="handleDelete"
            :show-delete="false" :show-export="false" :show-import="false" :show-filter="false" />
        </template>

        <template #action="{ row }">
          <TableAction :record="row" @edit="handleEdit" @delete="handleDelete" />
        </template>
      </VxeBasicTable>
    </a-layout-content>
    <menu-edit v-model:visible="showEdit" :data="current" :parent-id="parentId" :menu-list="menuData" @done="reload" />
    <TableFilter ref="tableFilterRef" @done="tableRef?.commitProxy('query')" v-model:visible="ifSHowFilter"
      :filter-cols="vxeColumn" />
  </a-layout>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { message } from 'ant-design-vue/es';
import {
  BasicTableProps,
  VxeBasicTable,
  VxeGridListeners
} from '@/components/VxeTable';
import { messageLoading } from 'ele-admin-pro/es';
import MenuEdit from './components/menu-edit.vue';
import { listMenus, removeMenu } from '@/api/system/menu';
import type { Menu } from '@/api/system/menu/model';
import config from './config';
import TableFilter from '@/components/TableFilter/index.vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const { TableAction, ToolButtons, vxeColumn, tableRef } = config;
const tableFilterRef = ref<InstanceType<typeof TableFilter>>();
const ifSHowFilter = ref(false);
const gridOptions = reactive<BasicTableProps>({
  keepSource: true,
  showOverflow: '',
  stripe: false,
  treeConfig: {
    rowField: 'id',
    parentField: 'pid',
    iconOpen: 'vxe-icon-square-minus',
    iconClose: 'vxe-icon-square-plus'
  },
  columns: vxeColumn,
  height: 'auto',
  pagerConfig: {
    enabled: false
  },
  proxyConfig: {
    ajax: {
      query: async ({ form }) => {
        form.ConModels = tableFilterRef.value?.conModelsJson;
        const data = await listMenus({ ...form });
        menuData.value = data;
        return data;
      }
    }
  }
});
const gridEvents = (openFilterModal) => {
  return {
    toolbarToolClick({ code }) {
      if (code == 'customFilter') {
        openFilterModal(true, {
          columns: vxeColumn
        });
      }
    }
  } as VxeGridListeners;
};
// 表格列配置

// 当前编辑数据
const current = ref<Menu | null>(null);

// 是否显示编辑弹窗
const showEdit = ref(false);

// 上级菜单id
const parentId = ref<number>();

// 菜单数据
const menuData = ref<Menu[] | undefined>([]);

/* 刷新表格 */
const reload = () => {
  tableRef.value?.commitProxy('query');
};

/* 打开编辑弹窗 */
const handleEdit = (row?: Menu | null) => {
  current.value = row ?? null;
  parentId.value = row?.id;
  showEdit.value = true;
};

const handleOpenFilter = () => {
  ifSHowFilter.value = true;
};

/* 删除单个 */
const handleDelete = (row: Menu) => {
  if (row.children?.length) {
    message.error('请先删除子节点');
    return;
  }
  const hide = messageLoading('请求中..', 0);
  removeMenu(row.id)
    .then((msg) => {
      hide();
      message.success(msg);
      reload();
    })
    .catch((e) => {
      hide();
      message.error(e.message);
    });
};
</script>

<script lang="ts">
import * as MenuIcons from '@/layout/menu-icons';

export default {
  name: 'SystemMenu',
  components: MenuIcons
};
</script>
